<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏大厅</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/gamehall.css">
</head>
<body>
    <div class="nav">游戏大厅</div>
    <!-- 整个页面的容器 -->
    <div class="container">
        <!-- 匹配框，使这个匹配框处于页面的垂直水平居中位置 -->
        <div>
            <!-- 展示用户信息 -->
            <div id="screen"></div>
            <!-- 开始匹配 -->
            <div id="match-button">开始匹配</div>
        </div>
    </div>

    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <script>
        $.ajax({
            tyep: "get",
            url: "/userController/getUserInfo",
            success:function(result){
                console.log(result)
                let screenDiv = document.querySelector("#screen");
                screenDiv.innerHTML = "玩家名称：" + result.username + " 分数：" + result.score + 
                "<br>"
                + "比赛场数：" + result.totalCount + " 获胜场数：" + result.winCount
            }
        });
    </script>
    <script>
        
        //给这里添加websocket以便服务器给客户端发送请求
        let websocketUrl = "ws://"+location.host+"/findMatch";
        let websocket = new WebSocket(websocketUrl);

        websocket.onopen = function(){
            console.log("连接建立");
        }
        websocket.onerror = function(){
            alert("连接异常");
        }
        websocket.onclose = function(){
            console.log("连接关闭");
        }
        //监听页面关闭时间，在页面关闭之前手动这里websocket的close方法
        websocket.onbeforeunload = function(){
            websocket.close();
        }
        //处理服务器发送过来的请求
        websocket.onmessage = function(e){
            // 发送过来的请求为JSON字符串，这里需要转化为js
            let resp = JSON.parse(e.data);
            let matchButton = document.querySelector("#match-button");
            if(!resp.ok){
                console.log("请求失败，服务器返回的数据为空" + resp.reason);
                return;
            }

            // 开始匹配
            if(resp.message == "startMatch"){
                // 将button的数据改为"匹配中...(点击停止)"
                console.log("进入匹配队列成功");
                matchButton.innerHTML = "匹配中...(点击停止)";
            } else if (resp.message == "stopMatch"){
                // 将button的数据改为"开始匹配"
                console.log("匹配结束");
                matchButton.innerHTML = "开始匹配";
            } else if(resp.message == "matchSuccess"){
                console.log("匹配成功");
                location.replace("/gobang_gameroom.html");
            } else if(resp.message =="repeatConnection") {
                alert("当前账号已在其他设备登陆")
                location.replace("/gobang_login.html");
            }else {
                console.log("收到了非法的响应：" + resp.message);
            }
        }

        

        let matchButton = document.querySelector("#match-button")
        matchButton.onclick = function(){
            //在发送请求之前先确认这里的连接是否正常
            if(websocket.readyState == websocket.OPEN){
                if(matchButton.innerHTML == "开始匹配"){
                    // 将信息转化成JSON字符串进行发送
                    websocket.send(JSON.stringify({
                        message: "startMatch"
                }))
                } else if(matchButton.innerHTML == "匹配中...(点击停止)"){
                    websocket.send(JSON.stringify({
                        message: "stopMatch"
                    }))
                }
            }else {
                alert("当前连接已断开！请重新连接")
                location.replace("/gobang_login.html");
            }
        }
    </script>
</body>
</html>